<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"  
                xmlns:h="http://java.sun.com/jsf/html"  
                xmlns:f="http://java.sun.com/jsf/core"  
                xmlns:p="http://primefaces.org/ui"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:d3="http://d3.unicen.edu.ar/facelets"
                template="profile.xhtml">

    <ui:define name ="body">
        <div id="sidebar">
            <ui:include src="userStats.xhtml"/>
            <p:panel style="margin: 8px">
                algo
            </p:panel >
            <p:panel style="margin: 8px">
                otra cosa
            </p:panel>
        </div>
        <div id="main">
            <h:form>
                <h:panelGrid columns ="2">
                    <h:outputText value="User Name"/>
                    <p:inputText value="#{suggestController.screenName}"/>

                    <h:outputText value="Inner graph"/>
                    <p:inputText value="#{suggestController.nivelIntermedio}"/>

                    <h:outputText value="Suggestions"/>
                    <p:inputText value="#{suggestController.nivelFinal}"/>

                </h:panelGrid>
                <div style="text-align: right">
                    <p:commandButton value ="Suggest" 
                                     actionListener="#{suggestController.search}" 
                                     update=":suggest-result"
                                     ajax="true"/>
                </div>
            </h:form>
            <h:panelGroup id="suggest-result">
                <h:panelGroup id="suggest-result-view" rendered ="#{not empty suggestController.resultUser}">

<!--<d3:graph id="fuentes-graph" model="#{suggestController.graphFuentes}" width="500" height="300"/>-->
                    <h:outputText value="Tiempo: "/><h:outputText value="#{suggestController.elapsedTime/1000} segundos"/>
                    <p:tabView style="margin: 8px 8px 8px 0px;">
                        <p:tab title="Fuentes">
                            <p:dataTable value="#{suggestController.fuentes}" var="usuario"
                                         paginator="true"  lazy="false"  rows="20" >
                                <p:column headerText="name">
                                    <a href=" https://twitter.com/#{usuario.screenName}"><h:outputText value="@#{usuario.screenName}"/></a>
                                </p:column>
                                <p:column headerText="follows" style="text-align:right">
                                    <h:outputText value="#{usuario.followsCount}"/>
                                </p:column>
                                <p:column headerText="followers" style="text-align:right">
                                    <h:outputText value="#{usuario.followersCount}"/>
                                </p:column>
                                <p:column headerText="tweets" style="text-align:right">
                                    <h:outputText value="#{usuario.tweetsCount}"/>
                                </p:column>
<!--                                <p:column headerText="score">
                                    <h:outputText value="#{usuario.mentions}">
                                        <f:convertNumber pattern="#0.0000" />
                                    </h:outputText>
                                </p:column>-->
                            </p:dataTable>
                        </p:tab>
                        <p:tab title="Amigos">
                            <p:dataTable value="#{suggestController.amigos}" var="usuario"
                                         paginator="true"  lazy="false" rows="20" >
                                <p:column headerText="name">
                                    <a href=" https://twitter.com/#{usuario.screenName}"><h:outputText value="@#{usuario.screenName}"/></a>
                                </p:column>
                                <p:column headerText="follows" style="text-align:right">
                                    <h:outputText value="#{usuario.followsCount}"/>
                                </p:column>
                                <p:column headerText="followers" style="text-align:right">
                                    <h:outputText value="#{usuario.followersCount}"/>
                                </p:column>
                                <p:column headerText="tweets" style="text-align:right">
                                    <h:outputText value="#{usuario.tweetsCount}"/>
                                </p:column>
<!--                                <p:column headerText="score">
                                    <h:outputText value="#{usuario.mentions}">
                                        <f:convertNumber pattern="#0.0000" />
                                    </h:outputText>
                                </p:column>-->
                            </p:dataTable>
                        </p:tab>
                        <p:tab title="Combinado">
                            <p:dataTable value="#{suggestController.union}" var="usuario"
                                         paginator="true" lazy="false" rows="20" >
                                <p:column headerText="name">
                                    <a href=" https://twitter.com/#{usuario.screenName}"><h:outputText value="@#{usuario.screenName}"/></a>
                                </p:column>
                                 <p:column headerText="follows" style="text-align:right">
                                    <h:outputText value="#{usuario.followsCount}"/>
                                </p:column>
                                <p:column headerText="followers" style="text-align:right">
                                    <h:outputText value="#{usuario.followersCount}"/>
                                </p:column>
                                <p:column headerText="tweets" style="text-align:right">
                                    <h:outputText value="#{usuario.tweetsCount}"/>
                                </p:column>
<!--                                <p:column headerText="score">
                                    <h:outputText value="#{usuario.mentions}">
                                        <f:convertNumber pattern="#0.0000" />
                                    </h:outputText>
                                </p:column>-->
                            </p:dataTable>
                        </p:tab>
                   </p:tabView>
           </h:panelGroup>
            </h:panelGroup>
         </div>
   </ui:define>   
 </ui:composition>

